<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import Utils from '@/utils/common'
import DateUtil from '@/utils/dateutil'
import API from '@/api'
import Http from '@/http'
import Store from '@/store'
import Msg from '@/utils/msg'
import _ from 'underscore'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHanlder = Utils.debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }

    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {

    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }

    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm&&sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)

    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  methods: {
    parseXList:function(x_list,y_list){
      var result = [];
      for(var i=0;i<x_list.length;i++){
        result.push(this.getObjByDate(x_list[i],y_list));
      }
      return result;
    },
    getXList:function(){
      var list= [];
      var date = new Date();
      var i=0;
      while(i<30){
        list.push(DateUtil.dateToStr("MM-dd",date));
        date = DateUtil.dateAdd('d',-1,date);
        i++;
      }
      list.reverse();
      console.log("list:",list);
      return list;
    },
    getObjByDate:function(date,y_list){
      for(var j=0;j<y_list.length;j++){
        if(y_list[j].d==date){
          return y_list[j].amount;
        }
      }
      return 0;
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.loadChartData()

    },
    loadChartData(){
      var x_list= this.getXList();

      Http.getModel(API.get_month_data, {date_list: x_list.join(',')},false).then( (json)=> {
        if(json.code==0){
          var result = json.data;
          var chart_list= [
            {
              name:'新用户数',
              type:'line',
              data: this.parseXList(x_list,result.list_1),
              smooth: true,
              itemStyle: {
                normal: {
                  color: '#388800',
                  lineStyle: {
                    color: '#388800',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            },
            {
              name:'访问首页',
              type:'line',
              data: this.parseXList(x_list,result.list_2),
              smooth: true,
              itemStyle: {
                normal: {
                  color: '#ff2222',
                  lineStyle: {
                    color: '#ff2222',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            },
            {
              name:'访问详情页',
              type:'line',
              data: this.parseXList(x_list,result.list_3),
              smooth: true,
              itemStyle: {
                normal: {
                  color: '#3888fa',
                  lineStyle: {
                    color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            },
            {
              name:'新订单数',
              type:'line',
              data: this.parseXList(x_list,result.list_4),
              smooth: true,
              itemStyle: {
                normal: {
                  color: '#3888fa',
                  lineStyle: {
                    color: '#882222',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            }
          ];
          this.renderChart(chart_list, this.chart);
        }
      })
    },
    renderChart:function(dataList,myChart){
        var x_list= this.getXList();
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data:['新用户数','访问首页','访问详情页','新订单数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : x_list
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series :dataList
        };
        myChart.setOption(option);
      }
  }
}
</script>
